﻿
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工资管理</title>
    <#--<%@include file="/WEB-INF/views/common/link.jsp"%>-->
    <#include "../common/link.ftl">
    <script>
        $(function () {
            /*新增按钮的点击事件*/
            $(".btn-input").click(function () {
                //清除模态框的数据
                $("#editForm input").val('');
                //获取事件源半丁的数据,使用data方法可以很方便的获取data-*开头的属性
                var json = $(this).data("json");
                //判断是否有数据
                if (json){//json有数据代表是编辑
                    $("input[name= id]").val(json.id);
                    $("input[name= year]").val(json.year);
                    $("input[name= month]").val(json.month);
                    $("input[name= money]").val(json.money);
                    $("input[name= 'employee.id']").val(json.employeeId);
                    $("input[name= 'payout.id']").val(json.payoutId);
                }
                //打开模态框
                $("#myModal").modal('show');

            })
            //保存
            $(".btn-submit").click(function () {
                //使用表单插件来提交
                //使用jQuery-form插件来提交一步表单(又表单会使用插件,写的代码利郎比较少)
                $('#editForm').ajaxSubmit(function (data) {//form中已经设置了action,method
                    if (data.success){
                        $.messager.alert("保存成功,1s后自动保存")
                        window.setTimeout(function () {
                            window.location.reload()
                        },800)
                    }else{
                        $.messager.popup(data.msg);
                    }
                })

            })
        })
    </script>

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#--<%--页面头部--%>-->
    <#include "../common/navbar.ftl">
    <!--菜单回显 声明变量设置值-->
    <#--<c:set var="currentMenu" value="salaryItemItem"/>-->
    <#assign currentMenu ="salary"/>
        <#--<%--菜单--%>-->
    <#include "../common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>工资管理</h1>
        </section>
        <section class="content">
            <div class="box">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="panel panel-default">
                            <div class="panel-heading">员工目录</div>
                            <div class="panel-body">
                                <div class="list-group">
                                <#list employees as dic>
                                    <#--给点击目录的时候添加样式data-id ="${dic.id}"和下面的<script>-->
                                <a data-id ="${dic.id}" href="/salary/list.do?employeeId=${dic.id}" class="list-group-item ">${dic.name}</a>
                                </#list>
                                    <script>
                                        $('a[data-id=${qo.employeeId}]').addClass('active');

                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>

                    <#--右侧删格,放入的是高级查询-->
                    <div class="col-lg-9">
                        <!--高级查询--->
                        <form class="form-inline" id="searchForm" action="/salary/list.do" method="post">
                            <input type="hidden" name="currentPage" id="currentPage" value="1">
                            <#--带上qo的parentId到后台,解决parentId的丢失问题-->
                          <#--  <input type="hidden" name="employeeId"  value="${qo.employeeId}">-->
                            <a href="#" class="btn btn-success btn-input" style="margin: 10px">
                                <span class="glyphicon glyphicon-plus"></span> 添加
                            </a>
                        </form>
                        <!--编写内容-->
                        <div class="box-body table-responsive no-padding ">
                            <table class="table table-hover table-bordered">
                                <tr>
                                    <th>编号</th>
                                    <th>年份</th>
                                    <th>月份</th>
                                    <th>工资金额</th>
                                    <th>员工对象</th>
                                    <th>工资发放方式</th>
                                    <th>操作</th>
                                </tr>
                            <#-- <%--pageResult是一个集合,所以要.list--%>-->
                            <#-- <c:forEach items="${result.list}" var="salaryItemItem" varStatus="vs">-->
                            <#list result.list as salary>
                                <tr>
                                <#--freemarker 如果取值时是空值要在后面加!,不然会出错<td>${salaryItemItem_index!}</td>-->
                                    <td>${salary_index+1}</td>
                                    <td>${salary.year}</td>
                                    <td>${salary.month}</td>
                                    <td>${salary.money}</td>
                                    <td>${salary.employee.name}</td>
                                    <td>${salary.payout.title}</td>

                              <td>
                                 <a href="#" class="btn btn-info btn-xs btn-input"
                                    <#--编辑回显,调用data-json,然后在部门类中编辑-->
                                 data-json='${salary.json}'>
                                     <span class="glyphicon glyphicon-pencil"></span> 编辑
                                 </a>

                             </td>
                                </tr>
                            </#list>
                            </table>
                            <!--分页-->
                        <#include "../common/page.ftl">
                        </div>
                    </div>
                </div>



            </div>
        </section>
    </div>
    <#include "../common/footer.ftl">
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增/编辑</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal" action="/salary/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id">

                  <div class="form-group" style="margin-top: 10px;">
                      <label for="sn" class="col-sm-3 control-label">年份：</label>
                      <div class="col-sm-6">
                          <input type="text" class="form-control" id="year" name="year"
                                 placeholder="请输入年份">
                      </div>
                  </div>
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="sn" class="col-sm-3 control-label">月份：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="month" name="month"
                                   placeholder="请输入月份">
                        </div>
                    </div>

                  <div class="form-group" style="margin-top: 10px;">
                      <label for="sn" class="col-sm-3 control-label">工资：</label>
                      <div class="col-sm-6">
                          <input type="text" class="form-control" id="money" name="money"
                                 placeholder="请输入工资">
                      </div>
                  </div>
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="sn" class="col-sm-3 control-label">员工：</label>
                        <div class="col-sm-6">
                            <select  class="form-control" id="emloyee.id" name="employee.id">
                            <#list employees as c>
                                <option value="${c.id}">${c.name}</option>
                            </#list>
                            </select>
                        </div>
                    </div>


                  <div class="form-group" style="margin-top: 10px;">
                      <label for="sn" class="col-sm-3 control-label">发放方式：</label>
                      <div class="col-sm-6">
                          <select  class="form-control" id="payout.id" name="payout.id">
                          <#list size as c>
                              <option value="${c.id}">${c.title}</option>
                          </#list>
                          </select>
                      </div>
                  </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-submit">保存</button>
            </div>
        </div>
    </div>
</div>


</body>
</html>
